<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式学习作业</title>
    <link rel="stylesheet" href="../../layui-v2.6.8/layui/css/layui.css" />
    <style>
			
			/* 当屏幕小于575px时使用以下样式 等于 xs */
			@media(max-width:575px) {
				.box{
					width: 100%;
				}
			}
			/* 等于 sm */
			@media(min-width:576px) and (max-width:767px) {
				.box{
					width: 100%;
				}
			}
			/* 等于 md */
			@media(min-width:768px) and (max-width:991px) {
				.box{
					width: 768px;
				}
			}
			/* 等于 lg */
			@media(min-width:992px){
				.box{
					width: 992px;
				}
			}
            #top1{
                border: 1px solid red;
                box-sizing: border-box;
            }
            #top2{
                border: 1px solid blue;
                box-sizing: border-box;
            }
            .box{
                margin: auto;
            }
            #top1>div>div{
                height: 80px;
            }
            #top2>div>div{
                height: 80px;
            }
    </style>
</head>
<body>
    <div class="box">
        <div id="top1" class="layui-row">
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
                <div  style="background-color: aqua;"></div>
                <div  style="background-color: rgb(15, 33, 33);"></div>
            </div>
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div style="background-color: rgb(248, 115, 27);"></div>
                <div style="background-color: rgb(130, 170, 30);"></div>
            </div>
        </div>
        
        <div id="top2" class="layui-row">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div  style="background-color: rgb(136, 11, 224);"></div>
                <div  style="background-color: rgb(195, 232, 7);"></div>
            </div>
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div style="background-color: rgb(248, 27, 178);"></div>
                <div style="background-color: rgb(8, 215, 238);"></div>
            </div>
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div style="background-color: rgb(25, 31, 147);"></div>
                <div style="background-color: rgb(41, 46, 46);"></div>
            </div>
        </div>
    </div>
<script src="../../layui-v2.6.8/layui/layui.js"></script>
</body>
</html>